CloudFront FunctionsでBasic認証のパスワードをかける

前提

• すでに、CloudFrontの設定は済んでいる
• Origin側との接続も済んでいる

準備：パスワードの文字列作成

まず、パスワードの文字列を作ります。

以下のパスワードを作ることを想定しています。

ID：classmethod
Password：0912cm

CloudShellが使えるリージョンに行きます。ここでは Tokyo リージョンを使用します。

以下のように入力

echo -n "classmethod:0912cm" | base64

出てきた文字列を記録します。

Y2xhc3NtZXRob2Q6MDkxMmNt

CloudFront Functions の作成

CloudFront から Functions に行きます。

Create Functionをクリックします。

Functionの名前を決めます。任意の名前で大丈夫ですが、ここでは「s3-cf-keisuke-function」という名前にしています。

Buildの中で、Function codeを入力します。 6行目のauthStringの中で先程の作成した文字列を入力しています。

function handler(event) {
  var request = event.request;
  var headers = request.headers;

  // echo -n user:pass | base64
  var authString = "Basic Y2xhc3NtZXRob2Q6MDkxMmNt";

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}

Save changesをクリックします。

Publishタブに移動し、Publishします。

ここでどのDistributionにこの Function を使うかの設定も可能なのですが、どうもここで設定すると、どのURLでBasic認証をかけているかが直感的ではない気がするので、ここでは設定しません。

Distribution の設定

CloudFront の Distributions に移動します。 該当 Distribution を開きます。

Behaviorタブから該当Behaviorを選択し、Editをクリックします。

画面一番下にスクロールして、Viewer Requestを設定します。 CloudFront Functionsを選択し、該当のFuncionここでは「s3-cf-keisuke-function」を選びます。 Save Changesをクリックします。

テスト

ここでは、 https://s3-cf-keisuke-web.cmth.work という名前で Distribution が設定されているものとします。

下記のように、ログイン画面が表示されます。

最初に入力した、IDとPasswordでログインできれば成功です。

まとめ

１つしかユーザー情報を設定できないものの、設定の手軽さと、動作の軽量さがあり、とてもとても便利な方法だと思います。